<template>
	<view>
		<u-status-bar></u-status-bar>
		<view class="navbox">
			<image src="/static/img/index/back.png" @click="back" class="navbox__back" mode=""></image>
			
			<view class="navbox__title" v-if="sousuo">
				{{title}}
			</view>
			<input @input="input" v-model="keyword" v-else type="text" class="navbox__search" placeholder="请输入项目关键字" placeholder-style="color:#FFFFFF" />
			<!-- <view class="navbox__back" v-if="sousuo&&btn">
				
			</view> -->
			<view class="navbox__searchtext" @click="clickRight">
				{{btn}}
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		name: "navbox",
		props: {
			title: {
				type: String,
				default:'',
			},
			sousuo:{
				type:Number,
				default:1
			},
			btn:{
				type:String,
				default:''
			}
		},
		
		data() {
			return {
				keyword:''
			};
		},
		methods:{
			back(){
				uni.navigateBack()
			},
			input(e){
				// console.log(e.detail.value)
				this.$emit('oninp',e.detail.value)
			},
			clickRight(){
				this.keyword=''
				this.$emit('rightH')
			}
		}
	}
</script>

<style lang="scss">
	.navbox {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 16rpx;
		height: 90rpx;
		&__back {
			width: 44.44rpx;
			height: 44.44rpx;
			
		}

		&__title {
			font-family: Source Han Sans SC;
			font-weight: 400;
			font-size: 33rpx;
			color: #F6F6F6;
			
		}
		&__search{
			width: 500rpx;
			height: 50rpx;
			background: rgba(255, 255, 255, 0.5);
			border-radius: 25rpx;
			font-size: 25rpx;
			padding: 0 30rpx;
		}
		&__searchtext{
			font-family: Source Han Sans SC;
			font-weight: bold;
			font-size: 25rpx;
			color: #FFFFFF;
			min-width: 44.44rpx;
		}
	}
</style>